<template>
    <div class="edit-popup">
        <popup ref="popupRef" title="上传对照表" confirmButtonText="提交修改" :async="true" :width="width + 'px'"
            @confirm="handleSubmit" @close="handleClose">
            <div v-loading="loading">
                <Upload class="mr-3" type="files" :show-progress="true" @change="change">
                    <el-button type="primary">{{
                        excelInfo?.name ? '重新上传' : '点击上传'
                    }}</el-button>
                </Upload>
                <div v-if="excelInfo.name">
                    上传完毕：{{ excelInfo.name }}
                    <el-button type="danger" link @click="handleDelete"> 删除 </el-button>
                </div>
                <div v-show="errorList.length > 0">
                    <h2 style="color: red">以下内容未解析成功</h2>
                </div>
                <el-table :data="errorList" v-show="errorList.length > 0">
                    <el-table-column label="商品编号" prop="number" show-overflow-tooltip />
                    <el-table-column label="商品全名（管家婆）" prop="goodName" show-overflow-tooltip />
                    <el-table-column label="美菜商品全名" prop="mcName" show-overflow-tooltip />
                    <el-table-column label="美菜规格" prop="mcUnit" show-overflow-tooltip />
                    <el-table-column label="快驴商品全名" prop="klName" show-overflow-tooltip />
                    <el-table-column label="快驴规格" prop="klUnit" show-overflow-tooltip />
                    <el-table-column label="优大集商品全名" prop="ydjName" show-overflow-tooltip />
                    <el-table-column label="优大集规格" prop="ydjUnit" show-overflow-tooltip />
                    <el-table-column label="商品单位" prop="unit" show-overflow-tooltip />
                    <el-table-column label="单价" prop="price" show-overflow-tooltip />
                </el-table>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup name="skuMappingEdit">
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import { fileDelete } from '@/api/file'
import { apiSkuMappingUploadExcel } from '@/api/sku_mapping'

const width = ref(550)
const emit = defineEmits(['success', 'close', 'refresh'])
const errorList = ref([])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const excelInfo = ref({})
const loading = ref(false)
const change = (res: any) => {
    excelInfo.value = res.response.data
}

// 提交按钮
const handleSubmit = async () => {
    if (!excelInfo.value?.name) {
        feedback.alertError('请先上传对照表')
        return
    }
    const data = {
        url: excelInfo.value?.url
    }
    loading.value = true
    await apiSkuMappingUploadExcel(data)
        .then((res) => {
            feedback.alertSuccess('处理成功')
            errorList.value = res
            if (res.length > 0) {
                width.value = 850
            }
            refresh()
            excelInfo.value = {}
        })
        .finally(() => {
            loading.value = false
        })
    // console.log('点击提交')
}
// 删除文件
const handleDelete = async () => {
    await feedback.confirm('删除后无法恢复，是否确认删除？')
    const ids = [parseInt(excelInfo.value?.id)]
    del({ ids })
}
const del = (data: any) => {
    fileDelete(data).then(() => {
        clear()
    })
}
//打开弹窗
const open = () => {
    popupRef.value?.open()
}
// 刷新
const refresh = () => {
    emit('refresh', () => { })
}

// 还原
const clear = () => {
    excelInfo.value = {}
    errorList.value = []
}
// 关闭回调
const handleClose = () => {
    emit('close')
}

defineExpose({
    open
})
</script>
